import type { CommonComponentProps } from '../../editor/interface';
import { useMaterailDrop } from '../../editor/hooks/Drop';
import { useRef, useEffect } from 'react';
import { useDrag } from 'react-dnd';

// 容器组件定义，接收 children 作为子组件
const Container = ({ id, name, children, styles }: CommonComponentProps) => {

  const {canDrop, drop } = useMaterailDrop(['Button', 'Container', 'Table','Form'], id);

  const divRef = useRef<HTMLDivElement>(null);

  const [_, drag] = useDrag({
      type: name,
      item: {
          type: name,
          dragType: 'move',
          id: id
      }
  });

  useEffect(() => {
      drop(divRef);
      drag(divRef);
  }, []);
  
  return (
      <div 
          data-component-id={id}
          ref={divRef}
          style={styles}
          className={`min-h-[100px] p-[20px] ${ canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`}
      >{children}</div>
  )
}

export default Container;
